<template>
  <view class="ai-header">
    <view class="header-left" @click="openMessage">
      <uv-icon name="menu" size="24" color="#333"></uv-icon>
    </view>
    
    <view class="header-center" @click="showPopover = !showPopover">
      <text class="header-title">AI智能分析</text>
      <uv-icon name="arrow-down" size="16" color="#b4b4b4"></uv-icon>
    </view>
    
    <view class="header-right">
      <uv-tag 
        text="1次" 
        plain 
        type="primary" 
        size="mini"
        :custom-style="tagStyle"
      ></uv-tag>
    </view>

    <!-- 模型选择弹窗 -->
    <uv-popup 
      v-model:show="showPopover" 
      mode="center" 
      :custom-style="popupStyle"
    >
      <view class="model-selector">
        <view class="model-title">选择AI模型</view>
        <uv-radio-group v-model="isCheckNum" placement="column">
          <view
            v-for="item in modelList"
            :key="item.mainModelId"
            class="model-item"
            :class="{ active: isCheckNum === item.mainModelId }"
            @click="handleSelect(item)"
          >
            <view class="model-info">
              <image :src="item.mainModelImg" class="model-avatar"></image>
              <view class="model-details">
                <text class="model-name">{{ item.mainModelName }}</text>
                <text class="model-desc">{{ item.mainModelDescription }}</text>
              </view>
            </view>
            <uv-radio
              :name="item.mainModelId"
              active-color="#737373"
            ></uv-radio>
          </view>
        </uv-radio-group>
      </view>
    </uv-popup>
  </view>
</template>

<script>
export default {
  name: 'AiHeader',
  data() {
    return {
      showPopover: false,
      isCheckNum: 1,
    }
  },
  props: {
    modelList: {
      type: Array,
      default: () => [],
    },
  },
  computed: {
    tagStyle() {
      return {
        color: '#495057',
        borderColor: '#495057'
      }
    },
    popupStyle() {
      return {
        borderRadius: '16rpx',
        padding: '32rpx',
        maxWidth: '600rpx'
      }
    }
  },
  methods: {
    openMessage() {
      this.$emit('update:data', true)
    },
    handleSelect(item) {
      this.showPopover = false
      this.isCheckNum = item.mainModelId
      this.$emit('on-select', item)
    },
  },
}
</script>

<style lang="scss" scoped>
.ai-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20rpx 30rpx;
  padding-top: calc(var(--status-bar-height) + 20rpx);
  background-color: #fff;
  border-bottom: 2rpx solid #f0f0f0;

  .header-left {
    padding: 16rpx;
    display: flex;
    align-items: center;
  }

  .header-center {
    display: flex;
    align-items: center;
    flex: 1;
    justify-content: center;

    .header-title {
      font-size: 32rpx;
      font-weight: 600;
      color: #212529;
      margin-right: 8rpx;
    }
  }

  .header-right {
    padding: 16rpx;
  }
}

.model-selector {
  .model-title {
    font-size: 32rpx;
    font-weight: 600;
    color: #333;
    text-align: center;
    margin-bottom: 32rpx;
  }

  .model-list {
    .model-item {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 24rpx 0;
      border-bottom: 2rpx solid #f0f0f0;

      &:last-child {
        border-bottom: none;
      }

      &.active {
        background-color: #f8f9fa;
        border-radius: 8rpx;
        padding: 24rpx 16rpx;
      }

      .model-info {
        display: flex;
        align-items: center;
        flex: 1;

        .model-avatar {
          width: 80rpx;
          height: 80rpx;
          border-radius: 50%;
          background: #f9f9f9;
          margin-right: 24rpx;
        }

        .model-details {
          display: flex;
          flex-direction: column;

          .model-name {
            font-size: 32rpx;
            color: #333;
            font-weight: 500;
            margin-bottom: 8rpx;
          }

          .model-desc {
            font-size: 24rpx;
            color: #737373;
          }
        }
      }
    }
  }
}
</style>
